<template>
  <div class="main">
    <div class="login-form">
      <h2 class="login-title">安踏会员管理系统-登入</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="font-size:#fff"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>
         <el-form-item prop="keep">
          <!-- <input type="checkbox" @click="keep()" name="" id=""> -->
          <el-checkbox v-model="ruleForm.checked" @click.native="keep($event)">保留7天免登陆</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gotoReg" style="float:right;">注册</el-button>
          <el-button @click="submitForm('ruleForm')" style="float:right;margin-right:5px">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import usersApi from '@/api/usersApi.js'
 export default {
  data () {
    return {
        ruleForm: {
          name: '',
          password: '',
          checked: false
        },
        rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur ' }
          ],
          checked: [
            {}
          ]
         
        }
    }
  },
  methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      gotoReg() {
        this.$router.push('/reg')
      }
  },
  components: {},
  watch:{ 
    ruleForm: {
      deep: true,
      handler:function(val){
        if(val.checked){
        this.$message({
          message:"请不要在公共场合使用该功能",
          type : "error"
        });
      }
      }
      
    }
  }
}

  
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}

.login-form{
  width: 350px;
  margin : 160px auto;
  background-color: rgba(231, 211, 211, 0.8);
  padding:30px;
  border-radius: 20px;
  padding-right: 60px;
  }
  .main {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2020/08/20/d32b0b38946856f512b688d74d48ae6b.jpg")no-repeat;
  overflow: hidden;
  background-size: cover;
  
  
}
.login-title {
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
}
</style>